<template>
    <div class="saveUpdate">
        <el-dialog :title="'绑定用户'" :visible.sync="showDialog" @close="$emit('update:showUpdate', false)"
                   :showUpdate="showUpdate" width="600px">
            <el-form :model="DetailInfo" ref="saveChn" label-width="120px" size="mini">
                <dialog-wrapper>
                    <el-form-item label="用户ID:" prop="user_id" :rules="[{ required: true, message: '用户ID不能为空'}]">
                        <el-input v-model="DetailInfo.user_id" :disabled="!!id" placeholder="请输入用户ID"></el-input>
                    </el-form-item>
                    <el-form-item label="平台:" prop="platform_id"  :rules="[{ required: true, message: '请选择平台'}]">
                        <el-select v-model="DetailInfo.platform_id" filterable placeholder="请选择平台" >
                            <el-option v-for="(statu, index) of index_mapper" :key="index" :label="statu" :value="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="绑定渠道:"   prop="channel"  :rules="[{ required: true, message: '绑定渠道不能为空'}]">
                        <el-select v-model="DetailInfo.channel" filterable placeholder="请选择渠道">
                            <el-option v-for="(statu, index) of getChnList" :key="index" :label="statu" :value="statu"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注:">
                        <el-input v-model="DetailInfo.note" type="textarea" :rows="2"></el-input>
                    </el-form-item>
                </dialog-wrapper>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="$emit('update:showUpdate', false)" size="small">取 消</el-button>
                <el-button v-if="id" type="primary" :loading="loading" @click="updateDetail" size="small">确 定</el-button>
                <el-button v-else type="primary" :loading="loading" @click="saveDetail" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import DialogWrapper from '@/components/DialogWrapper'
    import { saveAddBindUser,getIosChnOptions} from '@/api'
    export default {
        components: { DialogWrapper },
        data() {
            return {

                showDialog: this.showUpdate,
                loading: false,
                DetailInfo: {},
                getChnList:[],
            }
        },
        props: {
            showUpdate: {
                type: Boolean,
                default: false
            },
            id: {
                type: Number
            },
            index_mapper:{
                type:Object
            },
        },
        created(){
            this.getchnList();
        },
        methods: {
            async getchnList(){
                await getIosChnOptions().then(res => {
                    if(res.status === 0){
                        this.getChnList = res.data
                    }
                })
            },
            saveDetail(){
                this.$refs.saveChn.validate(valid => {
                    if (valid) {
                        saveAddBindUser(this.DetailInfo).then(res => {
                            if(res.status === 0){
                                this.$message({ message: '绑定成功。',type: 'success' })
                                this.$emit('update:showUpdate', false)
                            }
                        })
                    }
                })
            },
            updateDetail(){
            },
            getDetail(){
            }
        },
        watch: {
            showUpdate() {
                this.showDialog = this.showUpdate
            }
        }
    }
</script>
